<template>
  <div class="comment-container">
    <h1>用户回帖评论管理</h1>
    <div class="comment-header">
      <div class="header-block ">
        <el-input
          placeholder="请输入要搜索的评论关键词"
          v-model="formData.comment_content" size="10">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <div>
          发表时间:
          <el-date-picker
            v-model="times"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            @change="handleTimes"
            clearable>
          </el-date-picker>
        </div>
        <el-button type="primary" size="normal" icon="el-icon-search" @click="handleSearch">
          搜索
        </el-button>
        <el-button size="normal" icon="el-icon-refresh" @click="handleClear">
          重置
        </el-button>
      </div>
      <div>
        <el-button type="danger" size="normal" icon="el-icon-delete-solid" @click="handleBatchDelete">
          批量删除
        </el-button>
        <!--        <el-button type="success" size="normal" icon="el-icon-circle-plus" @click="">-->
        <!--          新增-->
        <!--        </el-button>-->
      </div>
    </div>
    <div v-if="!tableData || tableData.length < 1" class="juzhong">
      <span><i class="el-icon-loading"></i>
      加载中</span>
      <el-divider></el-divider>
    </div>
    <div v-else class="post-table">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        border>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="具体评论内容">
                <div class="comment-text" v-html="props.row.comment_content"></div>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          type="selection"
          width="80"
          align="center"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="comment_id"
          label="评论id"
          min-width="100"
          align="center"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="post_title"
          label="原问答帖标题"
          min-width="100"
          align="center"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="user_id"
          label="评论用户id"
          min-width="100"
          align="center"
          header-align="center"
        ></el-table-column>
        <el-table-column
          prop="nickname"
          label="评论用户昵称"
          min-width="100"
          align="center"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="update_time"
          label="评论时间"
          min-width="100"
          align="center"
          header-align="center"
        >
        </el-table-column>
        <el-table-column label="操作" align="center"
                         header-align="center"
                         min-width="150">
          <template slot-scope="scope">
            <div class="juzhong" style="flex-direction: row">
              <el-button type="danger" size="small" @click="confirmDelete(scope.row)">删除</el-button>
              <el-button type="primary" size="small" @click="handleViewDetail(scope.row)">查看详情</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="juzhong">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formData.pageNum"
          :page-sizes="[10, 50, 100, 150]"
          :page-size="formData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
    <!-- 查看详情弹窗 -->
    <el-dialog
      title="评论详情"
      :visible.sync="viewDetailDialogVisible"
      width="70vw"
    >
      <el-form label-position="left" label-width="150px">
        <el-form-item label="原问答帖标题">
          <el-input v-model="viewDetailForm.post_title" disabled></el-input>
        </el-form-item>
        <el-form-item label="具体评论内容">
          <div class="comment-text" v-html="viewDetailForm.comment_content"></div>
        </el-form-item>
        <el-form-item label="评论时间">
          <el-input v-model="viewDetailForm.update_time" disabled></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="viewDetailDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getComments, deleteComment} from "@/api/comment";
import {Message, MessageBox} from "element-ui";

export default {
  name: 'UserComment',
  data() {
    return {
      total: null,
      tableData: null,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      times: null,//时间选择处理
      formData: {
        pageSize: 10,
        pageNum: 1,
        comment_content: null,
        start_time: null,
        end_time: null
      },
      viewDetailDialogVisible: false,
      viewDetailForm: {}
    }
  },
  methods: {
    ClearPage() {
      this.formData = {};
      this.times = [];
    },
    handleClear() {
      this.ClearPage();
      this.fetchTable();
    },
    handleSizeChange(val) {
      this.formData.pageSize = val;
      this.fetchTable();
    },
    handleCurrentChange(val) {
      this.formData.pageNum = val;
      this.fetchTable();
    },
    //处理时间
    handleTimes(val) {
      if (val && val.length === 2) {
        const formattedTimes = val.map(date => this.formatDate(date));
        this.formData.start_time = formattedTimes[0];
        this.formData.end_time = formattedTimes[1];
      } else {
        this.formData.start_time = null;
        this.formData.end_time = null;
      }
    },
    //转换时间格式
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    async fetchTable() {
      try {
        const rep = await getComments(this.formData);
        this.tableData = rep.items;
        this.total = rep.total;
      } catch (e) {
        console.log(e);
        Message.warning("查询无效！");
      }
    },
    handleSearch() {
      console.log(this.formData);
      this.fetchTable();
    },
    handleViewDetail(row) {
      this.viewDetailDialogVisible = true;
      this.viewDetailForm = {
        comment_content: row.comment_content,
        post_title: row.post_title,
        user_id: row.user_id,
        nickname: row.nickname,
        update_time: row.update_time
      };
    },
    async confirmDelete(row) {
      MessageBox.confirm('确定要删除该评论吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return this.handleDelete(row);
      }).then(() => {
        Message.success('删除成功');
        this.fetchTable();
      }).catch(() => {
        Message.info('已取消删除');
      });
    },
    async handleDelete(row) {
      try {
        await deleteComment(row.comment_id);
      } catch (e) {
        console.log(e);
        Message.warning('删除失败');
      }
    },
    async handleBatchDelete() {
      const selection = this.$refs.multipleTable.selection;
      if (selection.length === 0) {
        Message.warning('请选择要删除的评论');
        return;
      }
      MessageBox.confirm('确定要批量删除选中的评论吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = selection.map(row => row.comment_id);
        return this.batchDelete(ids);
      }).then(() => {
        Message.success('批量删除成功');
        this.fetchTable();
      }).catch(() => {
        Message.info('已取消批量删除');
      });
    },
    async batchDelete(ids) {
      try {
        await deleteComment(ids);
      } catch (e) {
        console.log(e);
        Message.warning('批量删除失败');
      }
    }
  },
  mounted() {
    this.fetchTable();
  }
};
</script>

<style scoped lang="scss">
.header-block {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.comment-container {
  padding: 20px;
}

.comment-header {
  margin: auto;
  width: 100%;
  padding: 10px 0;
}

.comment-text {
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}
</style>

<style scoped lang="scss">
.el-input {
  flex: 1;
  margin-right: 20px;
}

.el-button {
  margin: 5px;
}

.el-icon-arrow-right {
  color: brown;
}
</style>
